<template>
  <div></div>
</template>
<script>
import Page from '@model/Page';
import _ from 'lodash';
const thisData = {
  page: { ...new Page(), pageSize: 30 }, // page 对象
  keyword: '',
  reflash: true,
  pending: false,
  nowChooseIndex: {},
  focusType: false,
  topShow: false,
  searched: false,
  dataLast: true,
};
let notSearch = false;
export default {
  name: 'com-lenovoselect',
  props: {
    searchData: {
      type: Function,
    },
    defaultItem: {
      type: Boolean,
      default: true,
    },
    chooseShowKey: {
      type: String,
      default: 'key',
    },
    listKey: {
      type: String,
      default: 'key',
    },
    listShowKey: {
      type: String,
      default: 'value',
    },
    searchKey: {
      type: String,
      default: 'keyword',
    },
    comRuturnData: {
      type: Array,
      default: () => {
        [];
      },
    },
  },
  computed: {
    nowChooseItem: {
      get() {
        return this.comRuturnData || [];
      },
      set(val) {
        this.$emit('dataUpdate', val);
      },
    },
  },
  data() {
    return thisData;
  },
  watch: {
    keyword: _.debounce(function(newVal, oldVal) {
      this.loadData(true);
    }, 800),
    nowChooseItem(newVal, oldVal) {
      let obj = {};
      if (newVal.length > 0) {
        newVal.forEach((item, index) => {
          obj[item[this.listKey]] = index;
        });
      }
      this.nowChooseIndex = obj;
    },
  },
  created() {
    document.addEventListener('click', this.blur);
    let obj = {};
    if (this.nowChooseItem.length > 0) {
      this.nowChooseItem.forEach((item, index) => {
        obj[item[this.listKey]] = index;
      });
    }
    this.nowChooseIndex = obj;
  },
  beforeDestroy() {
    document.removeEventListener('click', this.blur);
  },
  
  methods: {
    loadData: _.debounce(function(reflash = false) {
      if (notSearch) return;
      notSearch = false;
      if (!this.page?.hasNextPage) return;
      let { pageNum, pageSize } = this.page;
      let now_data = this.page.list;
      if (reflash == true) {
        pageNum = 1;
        now_data = [];
      }
      this.pending = true;
      this.reflash = reflash;
      this.searchData({
        pageNum,
        pageSize,
        [this.searchKey]: this.keyword,
      })
        .then((res) => {
          res.list = [...now_data, ...res.list];
          res.pageNum = (pageNum * 1) + 1;
          this.page = res;
          this.page.pageSize = 30;
          this.reflash = false;
          this.searched = true;
          this.$nextTick(() => {
            let scrollHeight = this.$refs.showData.scrollHeight * 1;
            if (scrollHeight < 300 && this.dataLast == true) {
              this.dataLast = false;
              this.loadData();
            }
          });
        })
        .catch((err) => {
          let page = new Page();
          page.pageSize = 20;
          this.page = page;
        })
        .finally((res) => {
          this.pending = false;
          this.reflash = false;
          this.searched = true;
        });
    }, 500),
    chooseItem(e) {
      if (this.nowChooseIndex[e[this.listKey]] > -1) {
        this.nowChooseItem.splice(this.nowChooseIndex[e[this.listKey]], 1);
      } else {
        this.nowChooseItem.push(e);
      }
    },
    scrollData(e) {
      if (e.target.scrollHeight - 300 <= e.target.scrollTop + 50) {
        this.loadData();
      }
    },
    focus(e) {
      if (!this.focusType) {
        let bottomH = window.innerHeight
          - e.target.getBoundingClientRect().y
          - e.target.getBoundingClientRect().height;
        if (bottomH < 370) {
          this.topShow = true;
        }
        this.$nextTick(() => {
          this.$refs.comLenovoInput.$el.querySelector('input').focus();
        });
      }
      this.focusType = !this.focusType;
    },
    blur(event) {
      const e = event || window.event;
      if (
        this.$refs.comLenovoselectBox
        && !this.$refs.comLenovoselectBox.contains(e.target)
      ) {
        if (this.focusType) this.focusType = false;
      }
    },
    deleteAll() {
      this.nowChooseItem.splice(0, this.nowChooseItem.length);
    },
    deleteItem(index) {
      this.nowChooseItem.splice(index, 1);
    },
    resetSerchList() {
      this.page = { ...new Page(), pageSize: 30 };
      this.keyword = '';
      this.reflash = true;
      this.searched = false;
      notSearch = true;
    },
  },
};
</script>
<style lang="scss" scoped>
$arrow-border: 8px;
$base-slect-box-top: 38px;
.com-lenovoselect-box {
  width: 100%;
  min-width: 120px;
  height: 32px;
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 1px solid $color-border-l1;
  position: relative;
  .choose-warp {
    width: 100%;
    height: 32px;
  }
  .choose-box {
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .choose-item {
      &:not(:first-child) {
        margin-left: 10px;
      }
      max-width: 180px;
      background: #f5f5f5;
      border-radius: 3px;
      padding: 2px 10px;
      font-size: 12px;
      flex-shrink: 0;
      .choose-item-close {
        margin-left: 10px;
        color: #d9d9d9;
        cursor: pointer;
      }
    }
  }

  .choose-box-close {
    width: 15px;
    height: 32px;
    padding-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .iconfont {
      color: #d9d9d9;
    }
  }
  .choose-box-arrow-down {
    @extend .choose-box-close;

    .iconfont {
      transition: all 0.8s;
      transform: rotateZ(-180deg);
      font-size: 12px;
    }
  }
  .choose-box-arrow-up {
    .iconfont {
      transform: rotateZ(0);
    }
  }

  .select-box {
    position: absolute;
    z-index: 996;
    top: ($base-slect-box-top + $arrow-border);
    background: #fff;
    width: 100%;
    height: 0;
    overflow: hidden;
    left: 0;
    box-sizing: border-box;
    transition: height 0.8s;
    border-radius: 4px;
    -webkit-filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)) !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)) !important;
    /* 向上的箭头 */

    .normal-arrow-top {
      font-size: 0;
      line-height: 0;
      border-width: $arrow-border;
      border-color: #fff;
      width: 0;
      border-top-width: 0;
      border-style: dashed;
      border-bottom-style: solid;
      border-left-color: transparent;
      border-right-color: transparent;
      position: absolute;
      top: -$arrow-border;
      left: 20px;
    }
    .normal-arrow-bottom {
      border-top-width: $arrow-border;
      border-bottom-width: 0;
      bottom: -$arrow-border;
      top: auto;
    }

    .select-box-con {
      padding: 12px;
    }
    .mar-t-12 {
      margin-top: 12px;
    }
    .mar-b-12 {
      margin-bottom: 12px;
    }
    .data-box {
      max-height: 300px;
      overflow-y: scroll;
    }
  }
  .select-box-show {
    height: auto;
    overflow: inherit;
    // outline: 1px solid $color-border-l1;
  }
  .select-box-show-top {
    top: auto;
    bottom: ($base-slect-box-top + $arrow-border);
  }
}
.com-lenovoselect-box-focus {
  border-color: $color-primary;
}
</style>
